<template>
  <view class="page">
    <view class="label">选择反馈类型</view>
    <radio-group class="radio-group" @change="typeChange">
      <view class="radio-item" v-for="item in types" :key="item.id">
        <label>
          <radio class="radio" color="#43b985" :value="item.id" /><text>{{ item.name }}</text>
        </label>
      </view>
    </radio-group>
    
    <view class="label mt_20">请简单描述您的问题</view>
    <textarea class="textarea" cols="30" rows="10" placeholder="输入内容" v-model="form.feedbackContent"></textarea>
    
    <view class="label mt_20">补充图片</view>
    <view class="upload-container">
      <view class="image" v-for="(image, index) in form.images" :key="index">
        <text class="close" @click="removeImage(index)">×</text>
        <image :src="image" mode="aspectFill"></image>
      </view>
      <view class="upload" @click="chooseImage" v-if="form.images.length < 3">
        <text class="plus">+</text>
      </view>
    </view>
    
    <view class="submit" :class="{ disabled: isDisabled }" @click="submit">
      提交
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { ApiAddOpinion } from '../api/user';

const types = ref([
  { id: 'interactive', name: '页面交互' },
  { id: 'function', name: 'App功能' },
  { id: 'bug', name: 'BUG' },
  { id: 'other', name: '其他' },
]);

const form = ref({
  feedbackType: '',
  feedbackContent: '',
  images: [],
  image:""
});



const isDisabled = computed(() => !form.value.feedbackType || !form.value.feedbackContent);

const typeChange = (event) => {
  form.value.feedbackType = event.detail.value;
};

const chooseImage = () => {
  uni.chooseImage({
    count: 3 - form.value.images.length, // 剩余可上传的图片数量
    success: (res) => {
      form.value.images = [...form.value.images, ...res.tempFilePaths];
    },
  });
};

const removeImage = (index) => {
  form.value.images.splice(index, 1);
};

const submit = async() => {
  if (isDisabled.value) return;
  const imagesString = form.value.images.join(',');
  form.value.image = imagesString
  await ApiAddOpinion(form.value)
  uni.showModal({
    title: '提交成功', // 标题
    content: '收到反馈，正在等待审核', // 内容
    showCancel: false, // 不显示取消按钮
    confirmText: '确定', // 确定按钮文本
    icon: 'none',
	});
  //返回	
  setTimeout(() => {
    uni.navigateBack();
  }, 1000);
  
};
</script>

<style lang="scss" scoped>
.page {
  padding: 32rpx;
  background: #fff;
  color: #333;
  .label {
    margin-bottom: 24rpx;
    font-weight: bold;
  }
  .radio-group {
    display: flex;
    flex-wrap: wrap;
  }
  .radio-item {
    width: 33.33%;
    margin-bottom: 20rpx;
    .radio {
      transform: scale(0.7);
    }
  }
  .textarea {
    border: 1px solid #eee;
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
  }
  .upload-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20rpx;
  }
  .image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    border: 1px solid #eee;
    position: relative;
    image {
      width: 100%;
      height: 100%;
      border-radius: 16rpx;
    }
    .close {
      position: absolute;
      top: -10rpx;
      right: -10rpx;
      z-index: 5;
      width: 40rpx;
      height: 40rpx;
      border-radius: 20rpx;
      background: #ef5656;
      color: #fff;
      text-align: center;
      line-height: 40rpx;
    }
  }
  .upload {
    border: 1px solid #eee;
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    .plus {
      font-size: 50rpx;
      color: #ccc;
    }
    &::after {
      content: '';
      width: 40%;
      height: 4rpx;
      border-radius: 2rpx;
      background: #eee;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    &::before {
      content: '';
      width: 4rpx;
      height: 40%;
      border-radius: 2rpx;
      background: #eee;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .submit {
    width: 600rpx;
    height: 84rpx;
    border-radius: 42rpx;
    background: #43b985;
    text-align: center;
    line-height: 84rpx;
    color: #fff;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 50rpx;
    z-index: 5;
    transition: background 0.2s ease;
    &.disabled {
      background: #c7c8c9;
      transition: background 0.2s ease;
    }
  }
}
.mt_20 {
  margin-top: 40rpx;
}
</style>